<template>
	<view class="box">
		<!-- <view class="title">重置密码</view> -->
		<view class="example">
			<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData" class="form">
				<uni-forms-item name="phone">
					<input v-model="customFormData.phone" placeholder="请输入账号" class="input" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<input v-model="customFormData.password" placeholder="请输入密码" class="input" type="password" />
				</uni-forms-item>
			</uni-forms>
			<navigator url="/pages/login/register" hover-class="navigator-hover">
				<view class="label">还未注册，点击注册</view>
			</navigator>
			<button @click="submit('customForm')" class="btn">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				customFormData: {
					phone: '',
					password: '',
				},
				customRules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号码'
						}, {
							pattern: /^[1]([3-9])[0-9]{9}$/,
							errorMessage: '手机号不合法！'
						}]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码'
							}, {
								minLength: 6,
								maxLength: 12,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'
							},
							// {
							// 	pattern: /^[0-9]{6}/,
							// 	errorMessage: '请输入6位密码'
							// },
						]
					}
				}
			};
		},
		methods: {
			submit(ref) {
				// console.log("发送验证码");
				let that = this
				this.$refs[ref].validate().then(aaa => {
					uni.request({
						url: 'http://localhost:3000/ljb/login',
						data: this.customFormData,
						method: "POST",
						success: (info) => {
							// console.log(info, "：info")
							if (info.data.code == 200) {
								// console.log(111);
								uni.showToast({
									title: info.data.msg,
									icon: 'success'
								})
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/recommend/index'
									});
								}, 1500)
							} else {
								uni.showToast({
									icon: "error",
									title: info.data.msg
								})
							}
						}
					});
					// uni.showToast({
					// 	title: `登录成功`
					// })
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 0 100rpx;
		position: relative;
		/* background-image: url('../../static/uni.png'); */
	}

	.logo {
		width: 100%;
		width: 100%;
		height: 310rpx;
		margin-top: 50rpx;
	}

	.title {
		margin-top: 50rpx;
		position: absolute;
		top: 0;
		line-height: 360rpx;
		font-size: 68rpx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100rpx;
	}

	.form {
		margin-top: 50rpx;
	}

	.input {
		background: #e2f5fc;
		margin-top: 30rpx;
		border-radius: 100rpx;
		padding: 20rpx 40rpx;
		font-size: 36rpx;
	}

	.input-placeholder,
	.input {
		color: #94afce;
	}

	.label {

		padding: 20rpx 0;
		text-align: right;
		font-size: 26rpx;
		color: #a7b6d0;
	}

	.btn {
		background: #4778f0;
		color: #fff;
		border: 0;
		border-radius: 100rpx;
		font-size: 36rpx;
		margin-bottom: 20rpx;
	}

	.btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1rpx, 1rpx);
	}


	.input-btn {
		position: relative;
	}

	.input-btn .input {
		padding-right: 260rpx;
	}

	.checking {
		position: absolute;
		right: 0;
		top: 0;
		background: #4778f0;
		color: #fff;
		border: 0;
		border-radius: 110rpx;
		font-size: 36rpx;
		margin-left: auto;
		margin-right: auto;
		padding-left: 28rpx;
		padding-right: 28rpx;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 2.55555556;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		padding-top: 2rpx;
		padding-bottom: 2rpx;
	}

	.checking.time {
		background: #a7b6d0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1rpx, 1rpx);
	}
</style>